<template>
  <el-dialog :visible.sync="dialogVisible" title="导入京东商品" width="1000px" height="800px" :close-on-click-modal="false" v-drag2anywhere>
    <el-form label-width="120px">
      <el-form-item label="京东SKU编码">
        <div style="display: flex;">
          <el-input v-model="tmpurl" placeholder="请输入京东SKU编码"></el-input>
          <el-button type="primary" @click="loadGoods">加载商品</el-button>
        </div>
        <iframe id="jdframe" ref="jdframe" :src="url" width="100%" height="500px"></iframe>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
    	<el-button @click="dialogVisible = false" size="medium">取 消</el-button>
    	<el-button type="primary" size="medium" @click="handleFetch">自动抓取商品信息</el-button>
    </div>
  </el-dialog>
</template>

<script>

  export default {
    data() {
      return {
        tmpurl:'https://item.jd.com/100064947909.html',
        url:'https://item.jd.com/100064947909.html',
        dialogVisible: false
      }
    },
    mounted() {

    },
    methods: {

      loadGoods() {
        this.url=this.tmpurl;
        var iframe=document.getElementById("jdframe");
        iframe.src="";
        iframe.src=this.url;
        iframe.onload=function(){
          console.log("加载完成",document.getElementById("jdframe").textContent);
        };
      },
      handleFetch(){

          var iframeWin=iframe.contentWindow;
          console.log(iframeWin);
          var doc=iframeWin.document;
          console.log(doc);
      }
    }
  }
</script>

<style>
</style>
